<template>
	<view class="yb-calendar-view yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<view class="top yb-flex yb-row yb-justify-between">
			<yb-tap active :disabled="current == 0" @tap="current -= 1">
				<yb-icon name="angle-arrow-left" size="30" color="#333"></yb-icon>
			</yb-tap>
			<yb-text size="30" :value="months.length > 0 ? months[current].label : '加载中'"></yb-text>
			<yb-tap active :disabled="current == months.length - 1" @tap="current += 1">
				<yb-icon name="angle-arrow-right" size="30" color="#333"></yb-icon>
			</yb-tap>
		</view>
		<swiper @change="onChange" :current="current" class="swiper" :indicator-dots="false" :autoplay="false" :duration="300" skip-hidden-item-layout>
			<swiper-item v-for="(item, index) in months" :key="item.value">
				<view class="swiper-item yb-flex">
					<view class="weeks yb-flex yb-row yb-align-center yb-justify-between">
						<text class="month" v-for="(week, i) in weeks" :key="i">{{week}}</text>
					</view>
					<yb-grid :data="item.child" :colspan="7">
						<template v-slot="{gridItem}">
							<text class="month" :style="{
								'margin-top': '50rpx'
							}">{{gridItem.detail.label}}</text>
						</template>
					</yb-grid>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			optionsSync () {
				return Object.assign({}, {
					
				})
			}
		},
		data () {
			return {
				weeks: ['日', '一', '二', '三', '四', '五', '六'],
				current: 0,
				months: []
			}
		},
		mounted() {
			this.months = this.getMonths()
			this.current = 1
		},
		methods: {
			getMonths (time) {
				let arr = []
				let date = time ? new Date(time) : new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				for ( let i = month - 1; i < month + 2; i++ ) {
					arr.push({
						label: i > 0 ? year + '年' + i + '月' : (year - 1) + '年' + (12 + i) + '月',
						value: i > 0 ? year + '-' + i : (year - 1) + '-' + (12 + i),
						child: this.getDates(i > 0 ? year + '-' + i : (year - 1) + '-' + (12 + i))
					})
				}
				return arr
			},
			getDates (time) {
				let date = time ? new Date(time) : new Date()
				let days = new Date(date.getFullYear(),date.getMonth()+1,0).getDate()
				let arr = []
				for ( let i = 0; i < new Date(date.getFullYear(),date.getMonth(),1).getDay(); i++ ) {
					arr.push({
						label: '',
						value: ''
					})
				}
				for ( let i = 0; i < days; i++ ) {
					arr.push({
						label: i + 1,
						value: i + 1
					})
				}
				return arr
			},
			onChange (e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style scoped>
	.yb-calendar-view .top {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #eee;
	}
	.yb-calendar-view .swiper {
		height: 700rpx;
	}
	.yb-calendar-view .swiper-item {
		padding: 30rpx 20rpx;
	}
	.yb-calendar-view .month {
		font-size: 30rpx;
		color: #333;
		text-align: center;
		width: 80rpx;
	}
</style>